import React, { useState } from 'react';
import { Form, Input, Button, Modal, Descriptions } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data';
import TableTitle from '../../../components/TableTitle';
import { getThemeList } from './service';
import { getDictType } from '@/services/services';
// 页面跳转
import { Link, history } from 'umi';

export default () => {
  const { TextArea } = Input;
  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData;
  // 详情
  const [Info, setInfo] = useState<columnsDataType>();
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 主题类型
  const [type, setType] = useState([]);

  React.useEffect(() => {
    getType();
  }, []);
  // 获取主题类型
  const getType = async () => {
    let res = await getDictType({
      dictType: 'theme-nft-type',
      pageSize: 10,
      current: 1,
    });
    console.log(res);
    setType(res.data);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  /**
   *
   * @param record 查看条目信息
   */
  const check = (record: columnsDataType) => {
    type?.forEach((item) => {
      record?.theme?.type == item.itemValue
        ? (record.theme.type = item.label)
        : null;
    });
    setInfo(record);
    setIsModalVisible(true);
  };

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) => (
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      <li>
        <a
          onClick={() => {
            check(record);
          }}
        >
          详情
        </a>
      </li>
    </ul>
  );

  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? (item.render = actionRender) : undefined;
  });

  // Table action 的引用，便于自定义触发
  const actionRef = React.useRef<ActionType>();

  return (
    <>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle={<TableTitle title="主题生成记录" />}
        scroll={{ x: 900 }}
        actionRef={actionRef}
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        request={async (params) => {
          console.log(params);
          let res = await getThemeList(params);
          console.log('😒', res);
          const result = {
            data: res.data.map((item) => {
              const { themeName, sex, type } = item.theme;
              console.log({ themeName, sex, type });

              return {
                ...item,
                themeName,
                sex,
                type,
              };
            }),
            total: res.pagination.totalSize,
          };
          return result;
        }}
        rowKey="serialNo"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title="详情"
        width={1000}
        visible={isModalVisible}
        footer={[
          <Button key="back" type="primary" onClick={handleOk}>
            确定
          </Button>,
        ]}
        onCancel={handleCancel}
      >
        <Descriptions>
          <Descriptions.Item label="主题名称">
            {Info?.theme?.themeName}
          </Descriptions.Item>
          <Descriptions.Item label="主题性别">
            {Info?.theme?.sex == 0
              ? '男'
              : Info?.theme?.sex == 1
              ? '女'
              : Info?.theme?.sex == 2
              ? '无性别'
              : null}
          </Descriptions.Item>
          <Descriptions.Item label="主题类型">
            {Info?.theme?.type}
          </Descriptions.Item>
          <Descriptions.Item label="合约名称">
            {Info?.theme?.contractConfig?.contractName}
          </Descriptions.Item>
          <Descriptions.Item label="合约编号">
            {Info?.theme?.contractConfig?.contractTemplateNo}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
    </>
  );
};
